<script setup>
import * as echarts from "echarts";
import { ref, onMounted, onUnmounted, watch } from "vue";

const props = defineProps({
  width: {
    type: [String, Number],
    default: "100%",
  },
  height: {
    type: [String, Number],
    default: "400px",
  },
  title: {
    type: String,
    default: "",
  },
  data: {
    type: Array,
    required: true,
    default: () => [],
  },
  timeData: {
    type: Array,
    required: true,
    default: () => [],
  },
  maxValue: {
    type: Number,
    default: 50,
  },
  barWidth: {
    type: Number,
    default: 20,
  },
});

const chartDom = ref(null);
let myChart = null;

// 初始化图表配置
const getOption = () => ({
  title: {
    text: props.title,
    top: "5px",
    left: "10px",
    textStyle: {
      color: "#000",
      fontSize: 12,
    },
  },
  grid: {
    top: "30px",
    left: "10px",
    right: "10px",
    bottom: "20px",
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: true,
      data: props.timeData,
      axisLabel: {
        show: true,
        interval: 0,
        color: "#fff",
        fontSize: 10,
        margin: 8,
      },
      axisTick: {
        show: false,
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      scale: true,
      name: "",
      max: props.maxValue,
      min: 0,
      boundaryGap: [0.2, 0.2],
      axisLabel: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
  ],
  series: [
    {
      name: "Dynamic Bar",
      type: "bar",
      data: props.data.map((value) => ({
        value,
        itemStyle: {
          color: value > props.maxValue ? "#ff0000" : "#5470c6",
        },
      })),
      barWidth: props.barWidth,
      label: {
        show: true,
        position: "top",
        textStyle: {
          color: "#fff",
          fontSize: 12,
        },
      },
    },
  ],
});

// 初始化图表
const initChart = () => {
  if (chartDom.value) {
    myChart = echarts.init(chartDom.value);
    myChart.setOption(getOption());
  }
};

// 处理窗口大小变化
const handleResize = () => {
  myChart?.resize();
};

// 监听数据变化
watch(
  [() => props.data, () => props.timeData],
  ([newData, newTimeData]) => {
    if (myChart) {
      myChart.setOption({
        xAxis: [
          {
            data: newTimeData,
          },
        ],
        series: [
          {
            data: newData.map((value) => ({
              value,
              itemStyle: {
                color: value > props.maxValue ? "#ff0000" : "#5470c6",
              },
            })),
          },
        ],
      });
    }
  },
  { deep: true }
);

onMounted(() => {
  initChart();
  window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
  myChart?.dispose();
});
</script>

<template>
  <div
    class="test"
    :style="{
      width: typeof width === 'number' ? width + 'px' : width,
      height: typeof height === 'number' ? height + 'px' : height,
    }"
  >
    <div ref="chartDom" class="chart-container"></div>
  </div>
</template>

<style scoped lang="scss">
.test {
  .chart-container {
    width: 100%;
    height: 100%;
  }
}
</style>
